<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			html,
			body,
			.ui-echarts {
				padding: 0;
				margin: 0;
				overflow: hidden;
				background-color: transparent;
				width: 100%;
				height: 100%;
			}
			.ui-echarts {
			}
		</style>
	</head>
	<body>
		<div class="ui-echarts" id="main" style="width: 100%;width: 100%;"></div>
		<script type="text/javascript" src="./uni.webview.1.5.4.js"></script>
		<script type="text/javascript" src="./echarts.min.js"></script>
		<script type="text/javascript">
			let isReady = false;
			let uiChart = null;
			/**
			 * 1: 准备就绪（webview）
			 * 2: 初始化echarts
			 * 3: 设置echarts option
			 * 4: 导出图片
			 * 5: 销毁echarts实例
			 * */
			/**
			 * 初始化图表配置
			 * */
			function setOption (option) {
 				if (!uiChart) {
					return;
				}
				uiChart.setOption(option);
				postMessage({ state: 3 })
			}
			/**
			 * 初始化图表
			 * */
			function initChart () {
				if (uiChart) {
					return;
				}
				uiChart = echarts.init(document.getElementById('main'));
				// echarts ready
				postMessage({ state: 2 });
			}
			/**
			 * 销毁实例
			 * */
			function dispose() {
				if (uiChart) {
					return;
				}
				uiChart.dispose();
				postMessage({ state: 5 })
			}
			/**
			 * 导出图片
			 * */
			function toImage () {
				const imageStr = uiChart.getDataURL({
					// [png|jpg|svg]注意：png, jpg 只有在 canvas 渲染器的时候可使用，svg 只有在使用 svg 渲染器的时候可用
					// type: 'png',
					// 导出的图片分辨率比例，默认为 1。
					pixelRatio: 2,
					backgroundColor: 'transparent',
					// 忽略组件的列表，例如要忽略 toolbox 就是 ['toolbox']
					// excludeComponents?: Array.<string>
				});
				postMessage({ state: 4, base64: imageStr })
			}
			/**
			 * 推送消息
			 * @onPostMessage
			 * */
			function postMessage (data) {
				if (!isReady) {
					console.error('ui-echarts 未准备就绪');
					return;
				}
				uni.postMessage({ data: data })
			}
			document.addEventListener('UniAppJSBridgeReady', function() {
				isReady = true;
				// ready
				postMessage({ state: 1 });
				// init
				initChart();
			});
		</script>
	</body>
</html>
